<template>
    <div style="">
        <RouteTop></RouteTop>
        <!--        地区选择开始-->
        <div class="animated fadeInUp" style="width: 100%;">
            <div style="height: 76px;display: flex;justify-content: center;align-items: center;border: 1px solid #EBEBEB">
                <div :class="{'allColor':categoryId1===0}" @click="setCategoryId1(0)" class="changeColor"
                     style="cursor: pointer;padding: 2px 15px;">全部
                </div>
                <div :class="{'color1':item.id===categoryId1}" @click="setCategoryId1(item.id)" class="changeColor"
                     v-for="item in categoryList"
                     style="cursor: pointer;padding: 2px 15px;">
                    {{item.name}}
                </div>
                <!--                <div style="padding: 2px 15px;">北美旅游</div>-->
                <!--                <div style="padding: 2px 15px;">东南亚旅游</div>-->

            </div>
            <!--        地区选择结束-->

            <!--出行日期开始-->
            <!--            <div style="display: flex;line-height: 40px;height: 40px;width: 1200px;background-color: #FAFAFA;margin: 0 auto;margin-top: 10px">-->
            <!--                <span>出行天数:</span>-->
            <!--                <div style="width: 400px;display: flex;justify-content: space-around">-->
            <!--                    <span :class="{'color2':0===categoryId2}" @click="setCategoryId2(0)" style="cursor: pointer;">全部</span>-->
            <!--                    <span :class="{'color2':item.id===categoryId2}" @click="setCategoryId2(item.id)" class="changeColor" style="cursor: pointer"-->
            <!--                          v-for="item in categoryList2">{{item.name}}</span>-->
            <!--                    &lt;!&ndash;                    <span>七日游</span>&ndash;&gt;-->
            <!--                    &lt;!&ndash;                    <span>十四日游</span>&ndash;&gt;-->
            <!--                </div>-->
            <!--            </div>-->
            <div style="background-color: #FAFAFA;display: flex;width: 1200px;margin: 0 auto;border: 1px solid #EBEBEB;margin-top: 5px;">
                <span>筛选条件:</span>
                <div style="width: 400px;display: flex;justify-content: space-around">
                    <!--                    <span class="changeColor" style="color: #0FC7D1">推荐</span>-->
                    <span :class="{'color1':flag1}" @click="change1(1)" class="changeColor">热门</span>
                    <span :class="{'color1':flag2}" @click="change1(2)" class="changeColor">最新</span>
                </div>
            </div>
            <!--出行日期结束-->
            <!--            列表详情开始-->
            <div v-for="item in routeVOList"
                 style="display: flex;width: 1200px;margin: 0 auto;margin-top: 20px;border: 1px solid #EBEBEB;border-radius: 3px">
                <el-image class="destination-detail-item-img" fit="cover" style="display: block;width: 350px;"
                          :src="item.img"
                          alt="">
                </el-image>
                <div style="margin-left: 50px;padding-top: 25px">
                    <div>
                        {{item.name}}
                    </div>
                    <div></div>
                    <div>
                        {{item.description}}

                    </div>
                    <!--                    <div>-->
                    <!--                        目的地 : 北欧-->
                    <!--                    </div>-->
                    <!--                    <div>-->
                    <!--                        法国+瑞士+意大利+德国10-14日游欧洲年度爆款超3400人出游含卢浮宫门票蒙帕纳斯大厦登顶-->
                    <!--                    </div>-->
                    <div @click="toRouteDetail(item.id)" class="dinggou"
                         style="color: #49B1F5;border-radius: 6px;padding: 2px 10px;width: 70px;margin-top: 50px;margin-left: 20px;border: 1px solid #49B1F5">
                        查看详情
                    </div>
                </div>
            </div>
            <!--            列表详情结束-->
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <Foot></Foot>
    </div>
</template>

<script>
    import RouteTop from "../components/top/RouteTop";
    import Foot from "../components/bottom/Foot";

    export default {
        created() {
            this.getRouteInfo();
        },
        data() {
            return {
                sort: 0,
                flag1: true,
                flag2: false,
                categoryList: [],
                categoryId1: 0,// 旅游地id
                categoryId2: 0,// 游玩日期id

            }
        },
        methods: {
            change1(num) {
                if (num === 1) {
                    this.flag2 = false;
                    this.flag1 = true;
                    this.sort = 0;
                    this.getRouteInfo();
                } else {
                    this.flag1 = false;
                    this.flag2 = true;
                    this.sort = 1;
                    this.getRouteInfo();

                }
            },
            setCategoryId1(id) {
                console.log(id);
                this.categoryId1 = id;
                this.getRouteInfo();
            },
            setCategoryId2(id) {
                console.log(id);
                this.categoryId2 = id;
                this.getRouteInfo();

            },
            async getRouteInfo() {
                let form = {
                    catrgoryId1: this.categoryId1,
                    catrgoryId2: this.categoryId2,
                    sort: this.sort
                }
                let {data: res} = await this.$http.post('route', form)
                this.categoryList = res.data.categoryList;
                this.categoryList2 = res.data.categoryList2;
                this.routeVOList = res.data.routeVOList;
                console.log(res)
            },
            toRouteDetail(id) {
                // console.log(id)
                // this.$router.push("/detail")
                this.$router.push({
                    query: {
                        id: id
                    },
                    path: 'detail'
                })
            }
        },
        name: "Route",
        components: {
            RouteTop,
            Foot
        }
    }
</script>

<style scoped>
    .allColor {
        color: #0FC7D1 !important;
    }

    .color1 {
        color: #1ECE9C !important;
    }

    .color2 {
        color: #1ECE9C !important;
    }

    .changeColor {
        transition: all 0.5s;
        cursor: pointer;

    }

    .changeColor:hover {
        color: #1ECE9C;
    }

    .dinggou {
        transition: all 0.5s;
        cursor: pointer;
    }

    .dinggou:hover {
        background-color: #49B1F5;
        color: #ffffff !important;
    }

    .tuijian {
        transition: all 0.4s;
        cursor: pointer;
    }

    .tuijian:hover {
        color: #ffffff !important;
        background-color: #1ECE9C;
    }
</style>